import React,{Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet
}from 'react-native';
import Style from '../../../components/Style';
import Tool from '../../../components/Tool';
import ChoseIcon from 'react-native-vector-icons/FontAwesome';
var Dimensions = require('Dimensions');
import Echarts from 'native-echarts';
const {
    color,fontSize
} = Style;
export  default  class Work extends Component{
    constructor(props){
        super(props);
        this.state={
            select:'time'
        }
    }
    componentDidMount() {

    }
    _onChange(value){
        this.setState({
            select:value
        });
    }
    _getWorkList(){
        Tool.fetchJson(Tool.appPath.mkst+'','',function (data) {

        },function (error) {

        },function () {

        })
    }
    render(){
        return(
            <View>
                <View style={styles.headView}>
                    <TouchableOpacity style={[styles.headerItem,this.state.select=='time'?styles.active:null]} onPress={()=>this._onChange('time')}>
                         <Text style={[styles.titleFont,{color:this.state.select=='time'?color.blue:color.black}]}>实时</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.headerItem,this.state.select=='total'?styles.active:null]} onPress={()=>this._onChange('total')}>
                        <Text style={[styles.titleFont,{color:this.state.select=='total'?color.blue:color.black}]}>汇总</Text>
                    </TouchableOpacity>
                </View>
                <View>
                    {
                        this.state.select == 'time' ? <View>
                            <ListTitle/>
                            <ListHead/>
                            <ListItem name={'成都'} user={'张三'} index={0} type={1}/>
                            <ListItem name={'德阳'} user={'李四'} index={1} type={2}/>
                            <ListItem name={'泸州'} user={'王五'} index={2} type={1}/>
                        </View>:
                            <View>
                                <TotalHeadView/>
                                <TotalHead/>
                                <View>
                                    <TotalItem name={'成都'} user={'张三'} index={0}/>
                                    <TotalItem name={'德阳'} user={'李四'} index={1}/>
                                    <TotalItem name={'泸州'} user={'王五'} index={2}/>
                                </View>
                            </View>
                    }

                </View>
            </View>
        )
    }
}
class ListTitle extends Component{
    render(){
        return(
            <View style={styles.listTitleView}>
                <View style={{flexDirection:"row",alignItems:'center',flex:1}}>
                    <Text>建档实时数据</Text>
                </View>
                <View  style={{flexDirection:"row",alignItems:'center',}}>
                    <ChoseIcon name={'th-large'} size={18} color={color.black}/>
                    <Text style={[styles.grayFont,{paddingLeft:5,paddingRight:5}]}>排序</Text>
                    <ChoseIcon name={'arrows-v'} size={14} color={color.black}/>
                </View>
            </View>
        )
    }
}
class ListHead extends Component{
    render(){
        return(
            <View style={styles.listHead}>
                <View style={{width:'25%'}}><Text>操作时间</Text></View>
                <View style={{width:'50%'}}><Text>建档集团</Text></View>
                <View style={{width:'25%'}}><Text>操作类型</Text></View>
            </View>
        )
    }

}
class ListItem extends Component{
    render(){
        return(
            <View style={[styles.listView,{backgroundColor:this.props.index%2==0?color.white:color.heightGray}]}>
                <View style={{width:'30%',flexDirection:'column'}}>
                    <Text style={styles.grayFont}>2018-01-01</Text>
                    <Text style={styles.timeFont}>10:02</Text>
                </View>
                <View style={{width:'45%'}}>
                    <Text style={styles.blackFont}>{this.props.name}</Text>
                    <Text style={styles.grayFont}>{this.props.user}</Text>
                </View>
                <View style={{width:'25%',alignItems:'center'}}>
                    {
                        this.props.type == 1? <Text style={{color:color.lightRed}}>预建档</Text>
                            :<Text style={{color:color.blue}}>正式建档</Text>
                    }
                </View>
            </View>
        )
    }
}
class TotalHeadView extends Component{
    render(){
        const option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top:'10%',
                containLabel: true
            },
            tooltip: {
                show: true,
                trigger: 'axis',
                formatter: '{c}',
                backgroundColor: 'rgba(0,0,0,0)',
                textStyle: {color: color.blue},
                position: function (point, params, dom, rect, size) {
                    return [point[0], 5];
                },
                axisPointer: {type: 'line', lineStyle: {color:'#c0c0c0'}}
            },
            xAxis: {
                type: 'category',
                axisLabel: {textStyle: {color: color.gray}},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false},
                data: [100, 200, 300]
            },
            yAxis: {
                type: 'value',
                axisLabel: {textStyle: {color:color.gray}},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            },
            series: [{
                type: 'line',
                smooth: true,
                data: [10,20,30]
            }],
            color: [color.blue]
        }
        return(
            <View style={styles.IndexLineView}>
                <View style={styles.IndexLineHeaderView}>
                    <Text>建档汇总数据</Text>
                </View>
                <View style={{height:180}}>
                    <Echarts option={option} height={180} width={Dimensions.get('window').width}/>
                </View>
            </View>
        )
    }
}
class TotalHead extends Component{
    render(){
        return(
            <View>
                <View style={{marginTop:20,paddingLeft:20,marginBottom:5}}>
                    <Text>当前位置> 全省</Text>
                </View>
                <View style={styles.totalHead}>
                    <View style={{width:'20%'}}>
                        <Text style={styles.totalFirstName}>四川省</Text>
                    </View>
                    <View style={{width:'27%', flexDirection:'column', alignItems:'flex-end'}}>
                        <Text style={{ fontSize:fontSize.small,}}>累计预建档</Text>
                        <Text style={[styles.blueFont,{fontSize:fontSize.small}]}>41000</Text>
                    </View>
                    <View style={{width:'33%', flexDirection:'column',alignItems:'flex-end'}}>
                        <Text style={{ fontSize:fontSize.small,}}>累计正式建档</Text>
                        <Text style={[styles.blueFont,{fontSize:fontSize.small}]}>10087</Text>
                    </View>
                    <View style={{width:'20%',alignItems:'center'}}>
                        <Text>16%</Text>
                    </View>
                </View>
            </View>
        )
    }

}
class TotalItem extends Component{
    render(){
        return(
            <View style={[styles.totalView,{backgroundColor:this.props.index%2==0?color.white:color.heightGray}]}>
                <View style={{width:'20%', flexDirection:'row'}}>
                    <Text>1</Text>
                    <Text style={styles.blueFont}>{this.props.name}</Text>
                </View>
                <View style={{width:'27%',alignItems:'flex-end'}}>
                    <Text style={styles.blackFont}>3011</Text>
                </View>
                <View style={{width:'33%',alignItems:'flex-end'}}>
                    <Text style={styles.blackFont}>1200</Text>
                </View>
                <View style={{width:'20%',alignItems:'center'}}>
                    <Text>25%</Text>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    headView:{
        backgroundColor:color.white,
        flexDirection:"row",
        alignItems:"center",
        borderBottomWidth:1,
        borderColor:color.gray,
        justifyContent:"center",
        height:Style.css.titleHeight
    },
    listTitleView:{
        height:50,backgroundColor:color.white, flexDirection:'row',alignItems:"center",
        paddingLeft:20,
        paddingRight:20
    },
    listHead:{
        height:30,backgroundColor:color.heightGray,flexDirection:'row',alignItems:"center",
        paddingLeft:20,
        paddingRight:20
    }
    ,listView:{
        height:Style.css.listHeight,flexDirection:'row',alignItems:"center", paddingLeft:20,
        paddingRight:20
    },
    grayFont:{
        fontSize:fontSize.normal,
        color:color.gray
    },
    timeFont:{
        fontSize:fontSize.normal,
        color:color.heightBlue,
    },
    blueFont:{
        fontSize:fontSize.normal,
        color:color.heightBlue
    },
    blackFont:{
        fontSize:fontSize.normal,
        color:color.black,
    },
    titleFont:{
        fontSize:fontSize.normal,
        width:70,
        textAlign:'center',
    },
    active:{
        borderBottomWidth:2,
        borderColor:color.blue,
        borderStyle:'dotted',

    },
    IndexLineView: {
        borderWidth: 1, borderColor: Style.color.shadow, backgroundColor: Style.color.white
    },
    IndexLineHeaderView: {
        borderBottomWidth: 1, borderColor: Style.color.lightGray, paddingHorizontal: 10, paddingVertical: 5,height:50,
        justifyContent:'center'
    },
    IndexLineHeaderTitle: {
        color: Style.color.gray, fontSize: Style.fontSize.normal,
    },
    totalView:{
        height:30,flexDirection:'row',alignItems:"center", paddingLeft:20,
        paddingRight:20
    },
    totalHead:{
        height:50,backgroundColor:color.white,flexDirection:'row',alignItems:"center",
        paddingLeft:20,
        paddingRight:20
        ,borderBottomWidth:1,
        borderColor:color.gray,
        borderStyle:'dotted',
    },
    totalFirstName:{
        fontSize:fontSize.large,
        color:color.blue,

    },
    headerItem:{justifyContent:'center',height:Style.css.titleHeight},
})